<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>变形、过渡及动画</title>
    <link rel="stylesheet" href="resource\animate.min.css">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(73, 163, 17);
            border-radius: 8px;
            text-align: center;
            color: white;
            line-height: 100px;
        }

        .flex-container {
            display: flex;
        }

        .box-3 {
            transform: scale(0.5);
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.97, -0.02, 0.15, 1.02);
            /* transition-delay: 1s; */
        }

        .box-3:hover {
            transform: scale(1);
        }

        .box-4 {
            transform: scale(0.5, 1.5);
        }

    </style>
</head>

<body>
    <h1>变形练习</h1>
    <div class="clearfix">
        <h2>旋转</h2>
        <div class="original">
            <div class="spin">
                <figure class="box box-1">Box 1</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-2">Box 2</figure>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <h2>缩放</h2>
        <div class="flex-container">
            <div class="original">
                <div class="spin">
                    <figure class="box box-3 ">Box 3</figure>
                </div>
            </div>
            <div class="original">
                <div class="spin">
                    <figure class="box box-4 animate__animated animate__lightSpeedInRight">Box 4</figure>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <h2>位移</h2>
        <div class="original">
            <div class="spin">
                <figure class="box box-5">Box 5</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-6">Box 6</figure>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <h2>倾斜</h2>
        <div class="original">
            <div class="spin">
                <figure class="box box-7">Box 7</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-8">Box 8</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-9">Box 9</figure>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <h2>透视</h2>
        <div class="original">
            <div class="spin">
                <figure class="box box-10">Box 10</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-11">Box 11</figure>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <h2>3D旋转</h2>
        <div class="original">
            <div class="spin">
                <figure class="box box-12">Box 12</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-13">Box 13</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-14">Box 14</figure>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <h2>背部可见性</h2>
        <div class="original">
            <div class="spin">
                <figure class="box box-15">Box 15</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-16">Box 16</figure>
            </div>
        </div>
    </div>
</body>

</html>
